<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>amStock Example</title>
		<link rel="stylesheet" href="../amcharts/style.css"	type="text/css">

		<script src="../amcharts/amcharts.js" type="text/javascript"></script>
		<script src="../amcharts/serial.js" type="text/javascript"></script>
		<script src="../amcharts/amstock.js" type="text/javascript"></script>

		<script>
			var chartData = [];
			generateChartData();

			function generateChartData() {
				var firstDate = new Date(2012, 0, 1);
				firstDate.setDate(firstDate.getDate() - 500);
				firstDate.setHours(0, 0, 0, 0);

				for (var i = 0; i < 500; i++) {
					var newDate = new Date(firstDate);
					newDate.setDate(newDate.getDate() + i);

					var a = Math.round(Math.random() * (40 + i)) + 100 + i;
					var b = Math.round(Math.random() * 100000000);

					chartData.push({
						date: newDate,
						value: a,
						volume: b
					});
				}
			}

			AmCharts.makeChart("chartdiv", {
				type: "stock",
				dataSets: [{
					color: "#b0de09",
					fieldMappings: [{
						fromField: "value",
						toField: "value"
					}, {
						fromField: "volume",
						toField: "volume"
					}],
					dataProvider: chartData,
					categoryField: "date",
					// EVENTS
					stockEvents: [{
						date: new Date(2010, 8, 19),
						type: "sign",
						backgroundColor: "#85CDE6",
						graph: "g1",
						text: "S",
						description: "This is description of an event"
					}, {
						date: new Date(2010, 10, 19),
						type: "flag",
						backgroundColor: "#FFFFFF",
						backgroundAlpha: 0.5,
						graph: "g1",
						text: "F",
						description: "Some longer\ntext can also\n be added"
					}, {
						date: new Date(2010, 11, 10),
						showOnAxis: true,
						backgroundColor: "#85CDE6",
						type: "pin",
						text: "X",
						graph: "g1",
						description: "This is description of an event"
					}, {
						date: new Date(2010, 11, 26),
						showOnAxis: true,
						backgroundColor: "#85CDE6",
						type: "pin",
						text: "Z",
						graph: "g1",
						description: "This is description of an event"
					}, {
						date: new Date(2011, 0, 3),
						type: "sign",
						backgroundColor: "#85CDE6",
						graph: "g1",
						text: "U",
						description: "This is description of an event"
					}, {
						date: new Date(2011, 1, 6),
						type: "sign",
						graph: "g1",
						text: "D",
						description: "This is description of an event"
					}, {
						date: new Date(2011, 3, 5),
						type: "sign",
						graph: "g1",
						text: "L",
						description: "This is description of an event"
					}, {
						date: new Date(2011, 3, 5),
						type: "sign",
						graph: "g1",
						text: "R",
						description: "This is description of an event"
					}, {
						date: new Date(2011, 5, 15),
						type: "arrowUp",
						backgroundColor: "#00CC00",
						graph: "g1",
						description: "This is description of an event"
					}, {
						date: new Date(2011, 6, 25),
						type: "arrowDown",
						backgroundColor: "#CC0000",
						graph: "g1",
						description: "This is description of an event"
					}, {
						date: new Date(2011, 8, 1),
						type: "text",
						graph: "g1",
						text: "Longer text can\nalso be displayed",
						description: "This is description of an event"
					}]
				}],


				panels: [{
					title: "Value",
					percentHeight: 70,

					stockGraphs: [{
						id: "g1",
						valueField: "value"
					}],

					stockLegend: {
						valueTextRegular: " ",
						markerType: "none"
					}
				}],

				chartScrollbarSettings: {
					graph: "g1",
					updateOnReleaseOnly:false
				},

				chartCursorSettings: {
					valueBalloonsEnabled: true,
					graphBulletSize: 1,
					valueLineEnabled:true,
					valueLineBalloonEnabled:true
				},

				periodSelector: {
					periods: [{
						period: "DD",
						count: 10,
						label: "10 days"
					}, {
						period: "MM",
						count: 1,
						label: "1 month"
					}, {
						period: "YYYY",
						count: 1,
						label: "1 year"
					}, {
						period: "YTD",
						label: "YTD"
					}, {
						period: "MAX",
						label: "MAX"
					}]
				},

				panelsSettings: {
					mouseWheelZoomEnabled:true,
					usePrefixes: true,
					accessible: true
				}
			});



		</script>
	</head>
	<body style="background-color:#FFFFFF">
		<div id="chartdiv" style="width:100%; height:600px;"></div>
	</body>

</html>